import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  TextInput,
  DeviceEventEmitter,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';
import FontFamilys from '../../../utils/FontFamilys';
import { changeNote, fetchNote } from '../../../actions/MyCustomerDetailAction';

class ChangeNote extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: this.props.note,
    };
  }
  _goBack() {
    this.props.navigator.pop();
  }
  _completed(dispatch, id) {
    if (navigator) {
      this.props.navigator.pop();
    }

    dispatch(changeNote(this.state.text, id, () => {
      dispatch(fetchNote(id));
    }));
    DeviceEventEmitter.emit('showToast', '添加备注成功！');
  }
  render() {
    const { dispatch, id } = this.props;
    return (
      <View style={[styles.flex, styles.bgColor]}>
        <View style={styles.header}>
          <TouchableOpacity
            activeOpacity={0.8}
            style={styles.back}
            onPress={() => this._goBack()}
          >
            <Image source={require('../../../img/go_back.png')} />
          </TouchableOpacity>
          <Text style={[styles.title]}>备注</Text>
          <TouchableOpacity
            style={styles.compl}
            activeOpacity={0.8}
            onPress={() => this._completed(dispatch, id)}
          >
            <Text style={[styles.completed]}>完成</Text>
          </TouchableOpacity>
        </View>
        <TextInput
          placeholder={'请填写备注'}
          defaultValue={this.state.text}
          multiline
          maxLength={130}
          style={[styles.textArea]}
          onChangeText={text => this.setState({ text })}
          underlineColorAndroid="transparent"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  bgColor: {
    backgroundColor: '#f7f8fa',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: PxToDp(44),
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  title: {
    color: '#121212',
    fontSize: PxToDp(18),
    fontFamily: FontFamilys(),
  },
  completed: {
    color: '#418cff',
    fontSize: PxToDp(18),
    fontFamily: FontFamilys(),
  },
  textArea: {
    marginTop: PxToDp(20),
    paddingLeft: PxToDp(15),
    paddingRight: PxToDp(15),
    paddingTop: PxToDp(13),
    width: '100%',
    height: PxToDp(136),
    backgroundColor: '#fff',
    textAlignVertical: 'top',
  },
  compl: {
    width: PxToDp(80),
    height: PxToDp(44),
    justifyContent: 'center',
    alignItems: 'flex-end',
    paddingRight: PxToDp(20),
  },
  back: {
    width: PxToDp(80),
    height: PxToDp(44),
    justifyContent: 'center',
    paddingLeft: PxToDp(10),
  },
});
export default ChangeNote;
